<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 50%"></div>
    <div id="container1" style="height: 50%"></div>


    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

     
    <script type="text/javascript">
        /* 
          @params: name 款项名称;
          @params: balance 余额；
          @params: loan 借款总额；
          @params: bills 此后每月账单；
        */
        const data = [
            {
                name: '金条',
                loan: 9200,
                bills: [806.82, 806.82, 806.82, 806.82, 806.82, 806.82, 806.82, 806.82, 806.82, 806.82, 806.82, 0],
            },
            {
                name: '白条',
                loan: 3366.6,
                bills: [1212.85, 745.17, 607.54, 365.51, 318.35, 94.69, 22.49],
            },
            {
                name: '建行',
                balance: 1622.85,
            },
            {
                name: '招行',
                balance: 17.93,
            },
            {
                name: '招行',
                loan: 10000,
                bills: [993.66, 895.33, 895.33, 895.33, 895.33, 895.33, 895.33, 895.33, 895.33, 895.33, 1782.31, 0],
            },
            {
                name: '招行副卡',
                loan: 10000,
            },
            {
                name: '微信',
                balance: 0,
            },
            {
                name: '微粒贷',
                loan: 3000,
                bills: [232.5, 194.18, 190.5, 189.53, 187.2, 181.5, 182.55, 179.25, 177.90, 174.75, 173.25, 170.93, 168, 166.28, 163.5, 161.3, 159.3, 156.53, 154.65, 152.25, 0],
            },
            {
                name: '支付宝',
                balance: 0,
            },
            {
                name: '备用金',
                loan: 0,
            },
            {
                name: '美团联名信用卡',
                loan: 410.07,
            },
        ]
        function getxAxis(type) {
            if (type == 'bills') {
                return ['2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05']
            } else if (type == 'assets') {
                let list = []
                data.forEach(item => {
                    list.push(item.name)
                })
                return list
            }
        }
        function getBills() {
            let list = []
            let total = []
            data.forEach(item => {
                if (item.bills && item.bills.length) {
                    list.push({
                        name: item.name,
                        stack: 'Total',
                        areaStyle: {},
                        data: item.bills,
                        type: 'line'
                    })
                    if (total.length == 0) {
                        total = []
                    }
                    item.bills.forEach((ele, i) => {
                        let n = parseFloat((total[i] ? total[i] : 0) + item.bills[i])
                        // debugger
                        total[i] = Number(n.toFixed(2))
                    })
                }
            })
            list.push({
                name: '每月总还款',
                label: {
                    show: true,
                    // position: 'top'
                },
                data: total,
                type: 'line'
            })
            return list
        }
        function getAllAssets() {
            let barList = []
            let pieList = []
            data.forEach(item => {
                if (typeof (item.balance) != 'undefined') {
                    barList.push(item.balance)
                } else if (typeof (item.loan) != 'undefined') {
                    barList.push(-item.loan)
                    pieList.push({
                        value: item.loan,
                        name: item.name
                    })
                } else {
                    console.log(item)
                    debugger
                }
            })
            return [
                {
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'top',
                    },
                    data: barList
                },
                {
                    name: 'pie',
                    type: 'pie',
                    radius: '50%',
                    center: ['75%', '50%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    data: pieList,
                }
            ]
        }
        // 上部：总账单
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option = {
            title: {
                text: '账单总额'
            },
            grid: {
                right: '50%',
                top: '15%'
            },
            xAxis: [{
                type: 'category',
                axisLabel: {
                    rotate: 30
                },
                data: getxAxis('assets')
            }
            ],
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    magicType: { type: ['line', 'bar'] },
                }
            },
            legend: {

            },
            yAxis: [{
                type: 'value'
            }
            ],
            series: getAllAssets()
        };


        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);

        // 下部：还款计划
        var dom1 = document.getElementById('container1');
        var myChart1 = echarts.init(dom1, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app1 = {};

        var option1 = {
            title: {
                text: '还款计划'
            },
            grid: {
                top: '15%'
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel: {
                        rotate: 30
                    },
                    data: getxAxis('bills')
                }
            ],
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    magicType: { type: ['line', 'bar'] },
                }
            },
            legend: {

            },
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: getBills()
        };


        if (option1 && typeof option1 === 'object') {
            myChart1.setOption(option1);
        }

        window.addEventListener('resize', myChart1.resize);
    </script>
</body>

</html>